<template>
    <div>
      <el-card>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程管理</el-breadcrumb-item>
          <el-breadcrumb-item>课程分类</el-breadcrumb-item>
        </el-breadcrumb>
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">课程分类</h3>
        <div style="text-align: left">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="类别名称：">
              <el-input v-model="name" placeholder="请输入搜素课程名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="search">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.prevent="searchAgain">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </el-card>
<!--      树形数据 与 懒加载 没用到 可以用-->
      <el-card style="margin-top: 20px">
        <el-table
            :data="lessonData1"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
              prop="typeName"
              label="类目名称"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              prop="count"
              label="商品数量"
              sortable
              width="180">
          </el-table-column>
          <el-table-column
              label="状态"
              width="180">
          <el-switch
              v-model="lessonData1.status=1? true : false"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>

          </el-table-column>

          <el-table-column
              prop="insertTime"
              label="创建时间"
              width="180">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="warning"
                  @click="manageCourse(scope.row)">管理商品</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

      </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
              name:null,
              lessonData1: [],
              // lessonData:[
              //   {
              //     id:1,
              //     typeName:"哈哈哈",
              //     count:5,
              //     status:1,
              //     insertTime:'2016-05-02',
              //     children: [
              //       {
              //           id:11,
              //           typeName:"哈哈哈",
              //           lessonCount:5,
              //           status:1,
              //           insertTime:'2016-05-02',
              //       },
              //       {
              //           id:12,
              //           typeName:"哈哈哈",
              //           lessonCount:5,
              //           status:1,
              //           insertTime:'2016-05-02',
              //       },
              //     ]
              //   }
              // ]


            }


        },
        methods: {
          del(id){
            // alert(id)
            this.$confirm('此操作将永久删除该类别和该类别下的所有课程，请谨慎选择, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                  let url="course/delall/"+id;
                  this.$axios.delete(url)
                      .then(res=>{
                        if (res.data.code == 200){
                          this.$message({
                            type:"success",
                            message:res.data.msg,
                            duration:1000
                          });

                          //刷新页面
                          this.searchAgain();
                        }else {
                          this.$message({
                            type:"error",
                            message:res.data.msg,
                            duration:1000
                          });
                        }
                      })
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });

                }
            ).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          searchAgain(){
            this.name="";
            this.loadMenus();
          },
          search(){
            this.loadMenus();

          },
          manageCourse(row){
            this.$router.push({
              path:'/CourseManage',
              query:{
                id:row.id,
              }
            });
          },
          loadMenus() {
            let url = "lesson/lList";
            this.$axios.get(url,{
              params: {
                name:this.name
              }
            })
                .then(res => {
                  if (res.data.code == 200) {
                    this.lessonData1 = res.data.data;
                    console.log("哈哈哈")
                    console.log(res.data)
                    console.log(this.lessonData1)
                  } else {
                    this.$message({
                      type: 'error',
                      message: res.data.msg,
                      duration: 1000
                    })
                  }

                })
          },
        },
      created() {
        this.loadMenus()
      }

    };
</script>
<style lang="less" scoped>
</style>